<template>
  <div class="loading-page">
    <div class="room-item" v-for="(item, index) in companyList" :key="index" @click="setRoom(item.id)">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
import { getCompany } from '@/api/common'

export default {
  name: 'CompanySelect',
  props: {},
  components: {},
  data() {
    return {
      companyList: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      getCompany()
        .then(res => {
          this.companyList = res.data
        })
        .catch(() => {})
    },
    setRoom(num) {
      localStorage.setItem('companyId', Number(num))
      if (!this.roomNum) {
        this.$router.replace('/room')
      } else {
        this.$router.replace('/')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.loading-page {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 20px;

  .room-item {
    cursor: pointer;
    width: 45vw;
    height: 45vw;
    background: #007aff;
    border-radius: 10px;
    margin-top: 15px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    margin-left: 15px;
  }
}
</style>
